<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>家庭收支管理系统_用户登录</title>
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="all" />
<link href="resources/css/custom.css" rel="stylesheet" />
<script src="resources/js/jquery-1.10.2.js"></script>
<script src="resources/js/jquery-ui-1.10.4.custom.js"></script>
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #016aa9;
	overflow:hidden;
}
.validateTips { border: 1px solid transparent; padding: 0.3em; }
.STYLE1 {
	color: #000000;
	font-size: 12px;
}
.a1{
	width:105px; 
	height:17px;
	background-color:#292929;
	border:solid 1px #7dbad7; 
	font-size:12px; 
	color:#6cd0ff
}
.a2{
	width:105px;
	height:17px;
	background-color:#292929;
	border:solid 1px #7dbad7;
	font-size:12px;
	color:#6cd0ff;
}
.message{
	font-size:12px;
	position: absolute;
	color:red;
	line-height:10px;
	width:20%;
	left: 540px;
}
.a_error{
	border-width: 2px;
	border-color: red;
}
.registe{
	position: absolute;
	font-size:15px;
	left:55%;
	top:308px;
	color:#CCBB11;
}
</style>
<script type="text/javascript">
if (top.location != self.location){     
	top.location=self.location;     
	}
$(document).ready(function(){
	$("[href='#submit']").click(function(){
		var userName = $( "#userName" ),
		password = $( "#password" );
		var bValid = true;
		bValid = bValid && checkLength( userName, "* 用户名", 2, 12 );
		bValid = bValid && checkLength( password, "* 密码", 6, 16 );
		bValid = bValid && checkRegexp( userName, /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, "* 用户名只能为 : a-z 0-9 中文" );
		bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "* 密码只能为 : a-z 0-9" );
		if ( bValid ) {
			$("#sou").submit();
		} 
		
		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "a_error" );
				$( ".message" ).text(n + "的长度" + "必须在 " + min + " 到 " + max + "之间." );
				setTimeout(function() {
					o.removeClass( "a_error", 1500 );
				}, 3000 );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "a_error" );
				$( ".message" ).text(n);
				setTimeout(function() {
					o.removeClass( "a_error", 1500 );
				}, 3000 );
				return false;
			} else {
				return true;
			}
		} 
	});
});
</script>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
		<table width="962" border="0" align="center" cellpadding="0" cellspacing="0">
			<tr>
				<td height="235" background="resources/images/login_03.gif">&nbsp;</td>
			</tr>
			<tr>
				<td height="53">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
      				<tr>
						<td width="394" height="53" background="resources/images/login_05.gif">&nbsp;</td>
						<td width="206" background="resources/images/login_06.gif">
							<form:form commandName="loginForm" action="login" id="sou">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="16%" height="25"><div align="right"><span class="STYLE1">用户</span></div></td>
								<td width="27%" height="25"><div align="center">
									<form:input path="userName" class="a1" id="userName"/></div>
								</td>
		              		</tr>
		              		
							<tr>
								<td height="25"><div align="right"><span class="STYLE1">密码</span></div></td>
								<td height="25"><div align="center">
									<form:password path="password" class="a2" id="password"/></div>
								</td>
								<td height="25"><div align="left">
									<a href="#submit">
										<img src="resources/images/dl.gif" width="49" height="18" border="0">
									</a></div> 
								</td>
							</tr>
							<tr>
								<td class="message">
		                			<form:errors path="userName" />
		                			<br/>
		                			<form:errors path="password"/>
			                	</td>
							</tr>
							</table>
							</form:form>
						</td>
            			<td width="362" background="resources/images/login_07.gif">&nbsp;</td>
					</tr>
				</table>
				</td>
      		</tr>
      		<tr>
        		<td height="213" background="resources/images/login_08.jpg">&nbsp;</td>
        		<td height="213"><a href="register" class="registe">用户注册</a></td>
      		</tr>
		</table>
		</td>
	</tr>
</table>
</body>
</html>